import { ReactNode } from 'react';

import cn from 'classnames';

import cs from './NumberedItem.module.scss';

export const NumberedItem = ({
  number,
  color,
  children,
  className,
}: {
  number: number;
  color?: string;
  children: ReactNode;
  className?: string;
}) => (
  <li className={cs.item}>
    <div className={cs.number} style={{ backgroundColor: color }}>
      {number}
    </div>
    <div className={cn(cs.text, className)}>{children}</div>
  </li>
);
